<template>
  <div class="container with-nav-padding">
    <yd-checklist
      ref="checklist"
      color="#0078FF"
      v-model="checkItemList"
      :callback="change"
    >
      <div class="item-list">
        <div v-if="!goodList.length" class="no-list">
          <img src="@/assets/待入账收益-assets/no_message.png" alt="" />
          <div class="text">暂无收藏商品</div>
        </div>
        <div class="item-cell" v-for="(item, index) in goodList">
          <yd-checklist-item
            @click.stop
            style="position:absolute; left:0.24rem; top:0.24rem;"
            :val="item.commodity_id"
          >
          </yd-checklist-item>
          <div @click="$router.push('/item-detail/' + item.commodity_id)">
            <div class="item-img">
              <img :src="item.commodity_img" alt="" />
            </div>
            <div class="item-title">
              {{ item.name }}
            </div>
            <div class="info">
              <div class="price">
                <div class="normal-price">¥{{ item.price }}</div>
              </div>
              <div class="sale">已售{{ item.sold_out }}件</div>
            </div>
          </div>
        </div>
      </div>
    </yd-checklist>
    <div v-if="checkItemList.length" class="bottom-bar">
      <yd-checkbox
        color="#0078FF"
        v-model="isCheckAll"
        shape="circle"
        :change="checkAll"
        >全选
      </yd-checkbox>
      <button @click="listDelete">
        删除
      </button>
    </div>
  </div>
</template>

<script>
import itemCell from "@/components/item-big-img.vue";
import { getFavoriteList } from "@/api/profile";
import { goodFavorite } from "@/api/mall";
export default {
  data() {
    return {
      checkItemList: [],
      isCheckAll: false,
      goodList: []
    };
  },
  methods: {
    change(value, isCheckAll) {
      this.isCheckAll = isCheckAll;
    },
    checkAll() {
      this.isCheckAll = !this.isCheckAll;
      this.$refs.checklist.$emit("ydui.checklist.checkall", this.isCheckAll);
    },
    listDelete() {
      goodFavorite({
        id: this.checkItemList,
        type: "all"
      }).then(res => {
        if (res.status === 200) {
          let listHash = {};
          for (let i = 0; i < this.goodList.length; i++) {
            let flag = true;
            for (let j = 0; j < this.checkItemList.length; j++) {
              if (this.checkItemList[j] === this.goodList[i].commodity_id) {
                flag = false;
              }
            }
            if (flag) {
              listHash[this.goodList[i].commodity_id] = this.goodList[i];
            }
          }
          let arr = [];
          for (let key in listHash) {
            arr.push(listHash[key]);
          }
          this.goodList = arr;
          this.isCheckAll = false;
          this.$refs.checklist.$emit("ydui.checklist.checkall", false);
        }
      });
    }
  },
  created() {
    getFavoriteList().then(res => {
      if (res.status === 200) {
        this.goodList = res.data.data;
      }
    });
  },
  components: {
    itemCell
  }
};
</script>

<style lang="less" scoped>
.container {
  .item-list {
    background-color: #fff;
    padding: 0.58rem 3.2%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.24rem;
    flex-wrap: wrap;

    .item-cell {
      border: 1px solid rgba(233, 233, 233, 1);
      width: 6.9rem;
      margin-bottom: 0.48rem;
      position: relative;

      .item-img {
        height: 6.9rem;
        width: 100%;
        background-color: #dfdfdf;
        overflow: hidden;
        img {
          width: 100%;
        }
      }

      .item-title {
        color: rgba(68, 68, 68, 1);
        font-size: 0.58rem;
        height: 1.6rem;
        overflow: hidden;
        margin: 0.4rem;
      }

      .info {
        margin: 0 0.4rem;
        display: flex;
        justify-content: space-between;
        line-height: 1.4rem;

        .price {
          .normal-price {
            font-weight: bold;
            color: rgba(68, 68, 68, 1);
            font-size: 0.48rem;
            margin-right: 0.48rem;
          }
        }

        .sale {
          color: rgba(153, 153, 153, 1);
          font-size: 0.48rem;
        }
      }
    }
  }
  .no-list {
    width: 100%;
    text-align: center;
    padding: 2rem 0;
    text-align: center;
    img {
      height: 4rem;
    }
    .text {
      color: rgba(68, 68, 68, 1);
      font-size: 0.58rem;
    }
  }
  .bottom-bar {
    background: #fff;
    position: fixed;
    height: 2rem;
    display: flex;
    justify-content: space-between;
    line-height: 2rem;
    padding: 0 3.2%;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
    button {
      color: #444444;
      font-size: 0.64rem;
      height: 1.44rem;
      border: none;
      background: rgba(233, 233, 233, 1);
      border-radius: 0.08rem;
      width: 3rem;
      margin-top: 0.28rem;
    }
  }
}
</style>
